<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用在线地址 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->

    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 视图(view)  页面,用于做html展示 -->
    <!-- {{msg}}  Vue的模板语法(文本插值,类似ES6的模板字符串${}, 将{{}} 内的值拼接到标签内,作为标签内的文本 )   -->
    <div id="app">
        <p>{{msg}}</p>
        <p>{{count}}</p>
    </div>
</body>
<script>
    /* 

        
        一. 介绍: 
            Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

            Vue和MVVM (vue框架的核心理念) M - V - VM
            
            模型(Model)  数据层, 用于存放视图展示所依赖的数据
            视图(View)   页面,用于做html展示
            视图模型层 (View Model)   连接 视图层(view)和模型层(model)的桥梁
                1. 数据监听  当模型层(model) 数据发生改变, 会被 view model检测到(数据劫持),将对应内容更新的 视图层(view)
                2. DOM监听  当视图层(view)发生改变,会被 view model检测到(事件监听), 将对应的内容更新到 模型层(model)



        二. 安装(vue属于第三方开源前端框架)
            1.  先下载  (a. 直接下载到本地  b. 使用在线地址(CDN))
            2.  在引入 
            3.  使用vue


        三. Vue的特征
            1. 声明式渲染
                Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

                a. vue允许采用简洁的模板语法 (Vue有自己的一套模板语法)
                b. 声明式地将数据渲染进DOM  (声明式: 在创建Vue实例的过程中,将挂载的数据渲染到对应视图中 => 可以理解为,页面加载时默认渲染一次)

            2. 响应式 
                当挂载的数据发生改变, 视图也会更新


        四.  Vue的option配置项
            new Vue(option)  构造函数Vue需要接收一个对象作为配置项,Vue的绝大部分功能都要依赖于此配置项实现

            详情:
                el: 挂载的元素(css选择器),当前Vue实例和哪个html元素绑定
                data:  挂载的数据  => 数据只有现在vue实例中挂载,才能在对应的模板语法中使用  (可以理解为 对应属性名查找Vue实例中的数据)


        五.  Vue实例的相关属性
            $el 挂载的元素(原生dom元素)
            $data 挂载的数据  



        注意: 
            1. Vue的绝大部分功能都要依赖于此配置项(new Vue(option))实现
            2. 数据只有现在vue实例中挂载,才能在对应的模板语法中使用 
            3. Vue中挂载的数据(data) 方法(methods) 计算属性(computed), 会在Vue实例中也挂载一份(可以直接通过Vue实例取值  => 也可以理解为默认语法中的变量查找范围都是通过Vue实例中查找)
            
    
    */

    // 声明式渲染

    // view model (视图模型层)   连接 视图层(view)和模型层(model)的桥梁
    // 1. 数据监听  当模型层(model) 数据发生改变, 会被 view model检测到(数据劫持),将对应内容更新的 视图层(view)
    // 2. DOM监听  当视图层(view)发生改变,会被 view model检测到(事件监听), 将对应的内容更新到 模型层(model)
    var vm = new Vue({
        el:"#app", // 挂载的元素(css选择器),当前Vue实例和哪个html元素绑定
        data:{ // 挂载的数据    模型(model)  数据层, 用于存放视图展示所依赖的数据
            msg:"hello world",
            count: 100,
        }
    });

    // 响应式演示:  当挂载的数据发生改变, 视图也会更新
    console.log(vm);   // Vue实例

    setTimeout(()=>{
        vm.msg = "hello vue";
        vm.count = 200;
    },2000)


</script>
</html>